<template>
	<view>
		<view style="padding: 20px;" v-loading="page.loading">
			<!-- 页面主体内容开始 -->
			<el-tag
				:key="item.name"
				v-for="(item, index) in myTags"
				closable
				:disable-transitions="false"
				:effect="item.checked ? 'dark' : 'plain'"
				@click="tagClick(index)"
				@close="deleteTag(index, item._id)"
			>
				{{ item.name }}
			</el-tag>
			<el-input v-if="inputVisible" v-model="inputValue" ref="saveTagInput" class="input-new-tag" size="small" @keyup.enter.native="addTag" @blur="addTag"></el-input>
			<el-button v-else size="small" @click="showInput" type="primary" plain class="button-new-tag">+ 新增标签</el-button>
			<view style="margin-top: 10px;color: #999999;">提示：添加标签后，需要选中该标签才能给用户打上标签。</view>
			<!-- 页面主体内容结束 -->
		</view>
	</view>
</template>

<script>
var that; // 当前页面对象
export default {
	props: {
		value: {
			Type: Array,
			default: function() {
				return [];
			}
		},
		userInfo: {
			Type: Object,
			default: function() {
				return {};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			page: {
				title: "标签",
				submitText: "关闭",
				top: "7vh",
				width: "600px",
				loading: false,
				btnLoading: false
			},
			inputVisible: false,
			inputValue: "",
			form1: {
				tags: []
			},
			myTags: []
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { userInfo } = this;
			vk.callFunction({
				url: "admin/business/sys.user.getTagList",
				loading: { that, name: "page.loading" },
				data: {
					pageIndex: 1,
					pageSize: 100, // 最多100个标签
				},
				success: data => {
					let tagsList = data.rows;
					let { tags = [] } = userInfo;
					tags.map((tagItem, tagIndex) => {
						let index = vk.pubfn.getListIndex(tagsList, "_id", tagItem);
						if (index > -1) {
							tagsList[index].checked = true;
						}
					});
					that.myTags = tagsList;
				}
			});
		},
		_input(value) {
			that.$emit("input", value);
		},

		deleteTag(index, _id) {
			that
				.$confirm("此操作将从所有用户中删除此标签, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
				.then(() => {
					that.myTags.splice(index, 1);
					vk.callFunction({
						url: "admin/business/sys.user.delTag",
						loading: { that, name: "page.btnLoading" },
						data: {
							_id
						},
						success: data => {}
					});
				})
				.catch(() => {});
		},
		tagClick(index) {
			that.$set(that.myTags[index], "checked", !that.myTags[index].checked);
			let tags = [];
			that.myTags.map(item => {
				if (item.checked && item._id) {
					tags.push(item._id);
				}
			});
			that._input(tags);
		},

		showInput() {
			this.inputVisible = true;
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},

		addTag() {
			let inputValue = this.inputValue;
			if (inputValue) {
				if (vk.pubfn.getListIndex(that.myTags, "name", inputValue) > -1) {
					that.$message.error("标签名称不可重复。");
					return false;
				}
				vk.callFunction({
					url: "admin/business/sys.user.addTag",
					loading: { that, name: "page.btnLoading" },
					data: {
						name: inputValue
					},
					success: data => {
						that.myTags.push({
							_id: data._id,
							name: inputValue,
							checked: false
						});
					}
				});
			}
			this.inputVisible = false;
			this.inputValue = "";
		}
	},
	watch: {},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>
.el-tag {
	cursor: pointer;
	user-select: none;
		margin: 5px;
}
.input-new-tag {
		margin: 5px;
	width: 90px;
	vertical-align: bottom;
}
.button-new-tag {
	margin: 5px;
	height: 32px;
		line-height: 32px;		padding-top: 0;
		padding-bottom: 0px;
	}
</style>
